/* eslint-disable react/prop-types */
import React from 'react';
import {Form, Input, Select, Button,Upload,Icon} from 'antd';
import UEditor from '@/components/ueditor/index'
const {Option} = Select;

class RichText extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: '',
            ueditor:null
        };
    }

    componentDidMount() {

    }

    handleSubmit = e => {
        e.preventDefault();
        const editor = this.state.ueditor;
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                let content = editor.getContent();
                let params = Object.assign({},values,{content:content});
                console.log('Received values of form: ', params);
            }
        });
    };


    render() {
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 4},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 20},
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 20,
                    offset: 4,
                },
            },
        };

        return (
            <Form {...formItemLayout} onSubmit={this.handleSubmit}>
                <Form.Item label="标题">
                    {getFieldDecorator('name', {
                        rules: [
                            {
                                required: true,
                                message: '请输入标题内容',
                            },
                        ],
                    })(<Input placeholder="标题"/>)}
                </Form.Item>
                <Form.Item label="所属分类">
                    {getFieldDecorator('category', {
                        rules: [
                            {
                                required: true,
                                message: '请选择所属分类',
                            }
                        ],
                    })(<Select placeholder="所属分类">
                        <Option value="jack">Jack</Option>
                        <Option value="lucy">Lucy</Option>
                    </Select>)}
                </Form.Item>
                <Form.Item label="关键字">
                    {getFieldDecorator('keyword', {
                        rules: [
                            {
                                required: true,
                                message: '请输入关键字',
                            }
                        ],
                    })(<Input placeholder="关键字"/>)}
                </Form.Item>
                <Form.Item label="附件上传" extra="请上传格式为zip的文件">
                    {getFieldDecorator('dragger', {
                        valuePropName: 'fileList',
                        getValueFromEvent: this.normFile,
                    })(
                        <Upload.Dragger name="files" action="/upload.do" style={{width:'50%'}}>
                            <p className="ant-upload-drag-icon">
                                <Icon type="inbox"/>
                            </p>
                            <p className="ant-upload-text">点击或拖动文件上传</p>
                            <p className="ant-upload-hint">支持单次或批量上传</p>
                        </Upload.Dragger>,
                    )}
                </Form.Item>
                <Form.Item label="示例内容">
                    <UEditor id='richText' name="richText"></UEditor>
                </Form.Item>
                <Form.Item {...tailFormItemLayout} style={{marginTop: '30px', textAlign: 'center'}}>
                    <Button className="submit_btn" type="default">取消</Button>
                    <Button className="submit_btn" type="primary" htmlType="submit">确定</Button>
                </Form.Item>
            </Form>
        );
    }
}

export default Form.create()(RichText);
